<template>
  <div>
    <van-sticky :offset-top="66" style="width:375px">
      <div class="tabs">
        <div
          class="item"
          :class="{'active':cur==index}"
          v-for="(item,index) in types"
          :key="index"
          @click="changeType(index)"
        >{{item.title}}</div>
      </div>
    </van-sticky>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="list-item">
        <router-link :to="{path:'/activity/detail',query:{id:1}}">
          <div class="inner">
            <div class="img">
              <img
                src="https://www.hymuseum.org.cn/uploadfiles/article_img/20200306/202003061029236624.png"
                alt
              />
              <div class="status">未开始</div>
            </div>
            <div class="right">
              <h3>木匠界的“宫崎骏”来啦</h3>
              <p>2020-03-25-2020-05-01</p>
              <p>金华市科技馆一楼大厅</p>
              <div class="btns">免费</div>
            </div>
          </div>
        </router-link>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      list: [],
      loading: false,
      finished: false,
      cur: 0,
      types: [
        { title: "全部", value: "" },
        { title: "收费", value: 1 },
        { title: "免费", value: 2 }
      ]
    };
  },
  methods: {
    changeType(index) {
      this.cur = index;
      this.onLoad();
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.tabs {
  height: 40px;
  border-bottom: 1px solid #e9e9e9;
  background: #fff;
  padding: 10px 10px 0;
  .item {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 10px;
    color: #000;
    font-size: 13px;
    font-weight: 500;
    margin: 0 10px;
    &.active {
      color: #fff;
      background: #f5bd5a;
    }
  }
}
/deep/ .van-sticky--fixed {
  width: 375px;
  left: 50%;
  transform: translateX(-50%);
}
.list-item {
  padding: 0 30px;
  .inner {
    padding: 10px 0;
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    .img {
      width: 164px;
      height: 100px;
      border-radius: 3px;
      position: relative;
      overflow: hidden;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
      .status {
        position: absolute;
        bottom: 5px;
        right: 5px;
        width: 46px;
        line-height: 16px;
        text-align: center;
        color: #fff;
        height: 16px;
        background: rgba(96, 200, 105, 1);
        border-radius: 8px;
      }
    }
    .right {
      flex: 1;
      h3 {
        font-size: 17px;
        line-height: 24px;
        margin-bottom: 5px;
      }
      p {
        color: #9b9b9b;
        font-size: 12px;
        transform: scale(0.95);
        line-height: 14px;
      }
      .btns {
        font-size: 14px;
        margin-top: 5px;
      }
    }
  }
}
</style>